<template>
  <div>
    <MyTable :arr='list'>
      <template #header>
        <td>#</td>
        <td>商品名称</td>
        <td>价格</td>
        <td>标签</td>
        <td>操作</td>
      </template>

      <template #mytd='{row:obj2, ind:index2}'>
        <td>{{obj2.id}}</td>
        <td>{{obj2.goods_name}}</td>
        <td>{{obj2.goods_price}}</td>
        <td>
          <input type="text" v-model="obj2.inputValue" v-if="obj2.inputVisible" v-focus @blur="blueFN(obj2)"
            @keyup.enter="addFN(obj2)" @keyup.esc="escFN(obj2)">
          <button class="btn btn-primary btn-sm add-tag" @click="obj2.inputVisible= true" v-else>+Tag</button>
          <span class="badge badge-warning" v-for="(str ,index) in obj2.tags" :key="index">{{str}}</span>
        </td>
        <td><button class="btn btn-danger btn-sm" @click='elbtn(index2)'>删除</button></td>
      </template>
    </MyTable>
  </div>
</template>

<script>
  import MyTable from '../components/MyTable'
  import axios from "axios"
  axios.defaults.baseURL = "https://www.escook.cn"
  export default {
    data() {
      return {
        list: []
      }
    },
    components: {
      MyTable
    },
    async created() {
      const res = await axios({
        url: '/api/goods'
      })
      this.list = res.data.data
    },
    methods: {
      elbtn(index2) {
        this.list.splice(index2, 1)
      },
      blueFN(obj2) {
        obj2.inputVisible = false
      },
      addFN(obj2) {
        if (obj2.inputValue.trim().length == 0) {
          alert('写点字好么?')
        } else {
          obj2.tags.push(obj2.inputValue);
          obj2.inputValue = ''
          obj2.inputVisible = false
        }
      },
      escFN(obj2) {
        obj2.inputValue = ''
      }
    },
    directives: {
      focus: {
        inserted(el) {
          el.focus()
        }
      }
    }
  }
</script>

<style scoped>
  .badge {
    margin-right: 3px;
    margin-left: 3px;
  }
</style>